﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/css/framework-font.css" rel="stylesheet" />
    <link href="~/css/framework-theme.css" rel="stylesheet" />
    <script src="~/lib/jquery/1.12.4/jquery.min.js"></script>
    <script src="~/lib/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="~/lib/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/lib/wdtree/tree.js"></script>
    <link href="~/lib/wdtree/tree.css" rel="stylesheet" />
    <link href="~/lib/select2/select2.min.css" rel="stylesheet" />
    <script src="~/lib/select2/select2.min.js"></script>
    <script src="~/lib/laydate/laydate.js"></script>
    <script src="~/lib/moment/moment.js"></script>
    <link href="~/lib/wizard/wizard.css" rel="stylesheet" />
    <script src="~/lib/wizard/wizard.js"></script>
    <script src="~/lib/validate/jquery.validate.min.js"></script>
    <script src="~/lib/datepicker/WdatePicker.js"></script>
    <script src="~/lib/jqgrid/5.3.0/i18n/grid.locale-cn.js"></script>
    <link href="~/css/framework-ui.css" rel="stylesheet" />
    <script src="~/js/framework-ui.js"></script>
</head>
<body>
    <form id="form1">
        <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px;">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">基本信息</a></li>
                @*<li ><a href="#">扩展信息</a></li>*@
            </ul>
            <div style="padding-top: 20px; margin-right: 30px;">
                <table class="form">
                    <tr>
                        <th class="formTitle">用户名</th>
                        <td class="formValue">
                            <input id="UserName" name="UserName" type="text" class="form-control required" placeholder="请输入用户名" />
                        </td>
                        <th class="formTitle">密码</th>
                        <td class="formValue">
                            <input id="Password" name="Password" type="password" class="form-control required" placeholder="请输入密码" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">公司</th>
                        <td class="formValue">
                            <select id="CompanyId" name="CompanyId" class="form-control required"></select>
                        </td>
                        <th class="formTitle">部门</th>
                        <td class="formValue">
                            <select id="DepartmentId" name="DepartmentId" class="form-control required">
                                <option value="">==请选择==</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">岗位</th>
                        <td class="formValue">
                            <select id="PositionId" name="PositionId" class="form-control required">
                                <option value="">==请选择==</option>
                            </select>
                        </td>
                        <th class="formTitle">昵称</th>
                        <td class="formValue">
                            <input id="NickName" name="NickName" type="text" class="form-control required" placeholder="请输入姓名" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">姓名</th>
                        <td class="formValue">
                            <input id="RealName" name="RealName" type="text" class="form-control required" placeholder="请输入姓名" />
                        </td>
                        <th class="formTitle">性别</th>
                        <td class="formValue">
                            <select id="Gender" name="Gender" class="form-control required">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">手机</th>
                        <td class="formValue">
                            <input id="MobilePhone" name="MobilePhone" type="text" class="form-control" />
                        </td>
                        <th class="formTitle">生日</th>
                        <td class="formValue">
                            <input id="Birthday" name="Birthday" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">微信</th>
                        <td class="formValue">
                            <input id="WeChat" name="WeChat" type="text" class="form-control" />
                        </td>
                        <th class="formTitle">邮箱</th>
                        <td class="formValue">
                            <input id="Email" name="Email" type="text" class="form-control" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">类型</th>
                        <td class="formValue">
                            <select id="ObjectType" name="ObjectType" class="form-control">
                                <option value="1">普通用户</option>
                                <option value="2">系统管理员</option>
                            </select>
                        </td>
                        <th class="formTitle">允许登录</th>
                        <td class="formValue">
                            <select id="EnabledMark" name="EnabledMark" class="form-control">
                                <option value="true">是</option>
                                <option value="false">否</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">角色</th>
                        <td class="formValue" colspan="3">
                            <select id="RoleIds" name="RoleIds" class="form-control required"></select>
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle" valign="top" style="padding-top: 5px;">
                            备注
                        </th>
                        <td class="formValue" colspan="3">
                            <textarea id="Description" name="Description" class="form-control" style="height: 60px;"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
    <script>
        var keyValue = $.request("keyValue");
        $(function () {
            initControl();
            if (!!keyValue) {
                $.ajax({
                    url: "/SystemManage/User/GetFormJson",
                    data: { keyValue: keyValue },
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $("#form1").formSerialize(data);
                        $("#UserName").attr('disabled', 'disabled');
                        $("#Password").val("******").attr('disabled', 'disabled');
                        $("#RoleIds").val(data.RoleIds.split(',')).trigger("change");
                        $("#form1").find('.form-control,select,input').attr('readonly', 'readonly');
                        $("#form1").find('select').attr('disabled', 'disabled');
                        $("#form1").find('div.ckbox label').attr('for', '');
                    }
                });
            }
        });
        function initControl() {
            $("#Gender").bindSelect()
            $("#ObjectType").bindSelect()
            $("#EnabledMark").bindSelect()
            $("#CompanyId").bindSelect({
                url: "/SystemManage/Organize/GetTreeSelectJson"
            });
            $("#DepartmentId").bindSelect({
                url: "/SystemManage/Organize/GetTreeSelectJson",
            });
            $("#PositionId").bindSelect({
                url: "/SystemManage/Position/GetGridJson",
                id: "Id",
                text: "FullName"
            });
            $.ajax({
                type: 'get',
                url: "/SystemManage/Role/GetSelectJson",
                dataType: 'json',
                async: false,
                success: function (data) {
                    var results = [];
                    $.each(data, function (idx, obj) {
                        var rslt = {};
                        rslt.id = obj.Id;
                        rslt.text = obj.FullName;
                        results.push(rslt);
                    });
                    $('#RoleIds').select2({
                        multiple: true,
                        data: results
                    });
                }
            });

            $("#UserName").blur(function () {
                if (validUserNameFormat()) {
                    vaildUserNameExists();
                }
            });
        }
        function submitForm() {
            if (!!keyValue) {
                if (!$('#form1').formValid()) {
                    return false;
                }
            }
            else {
                if (!$('#form1').formValid() || !validUserNameFormat()) {
                    return false;
                }
            }
            var postData = $("#form1").formSerialize();
            postData["roleIds"] = $('#RoleIds').val();
            $.submitForm({
                url: "/SystemManage/User/SubmitForm?keyValue=" + keyValue,
                param: postData,
                success: function () {
                    $.currentWindow().$("#gridList").trigger("reloadGrid");
                }
            })
        }
        function validUserNameFormat() {
            var username = $("#UserName").val();
            if (username == "" || username == null) {
                $.modalMsg("用户名不能为空，请填写用户名。", "error");
                return false;
            }
            else if (/^\d.*$/.test(username)) {
                $.modalMsg("您输入的用户名“" + username + "”格式不正确，用户名不能以数字开头。", "error");
                return false;
            }
            else if (! /^.{6,20}$/.test(username)) {
                $.modalMsg("您输入的用户名“" + username + "”字符长度有误，合法长度为6-20个字符。", "error");
                return false;
            }
            else if (! /^[\w_]*$/.test(username)) {
                $.modalMsg("您输入的用户名“" + username + "”含有非法字符，用户名只能包含_,英文字母，数字。", "error");
                return false;
            }
            else if (! /^([a-z]|[A-Z])[\w_]{5,19}$/.test(username)) {
                $.modalMsg("您输入的用户名“" + username + "”格式不正确，用户名只能包含_,英文字母，数字。", "error");
                return false;
            }
            else {
                return true;
            }
        }
        function vaildUserNameExists() {
            $.ajax({
                type: 'get',
                url: "/SystemManage/User/VaildUserNameExists",
                dataType: 'json',
                async: false,
                data: { username: $("#UserName").val() },
                success: function (result) {
                    if (result.state == 'error') {
                        $.modalMsg(result.message, "error");
                        setTimeout(function () {
                            //$('#UserName').val('');
                            $('#UserName').focus();
                        }, 500)
                    }
                }
            });
        }
    </script>
</body>
</html>
